<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <title>添加文档</title>
    {$QPath}
    <link rel="stylesheet" type="text/css" href="__TMPL__../Admin/Public/base.css" />
    <style type="text/css">
        #attPli li{float:left;margin-right:20px;}
        #attPli label{padding-left:6px;}
        .ips th{
            width:80px;
        }
        #preview img{
            border:1px solid #767676;
            padding:1px;
        }
        #galleryContainer{
            display:none;
            position:absolute;
            z-index:3684;
            height:430px;
            width:510px;
            background-color:#484848;
            border:10px solid #030303;
            -moz-border-radius:6px;
            -webkit-border-radius:6px;
        }
        #gallery{
            height:400px;
            overflow:auto;
        }
        #gallery img{
            margin:4px;
            border:6px solid #484848;
            cursor:pointer;
        }
        #gallery_button{
            padding-top:10px;
            height:20px;
            background-color:#030303;
        }
        #gallery_button div{
            float:right;
            width:80px;
            margin-right:20px;
            color:#fff;
            border:1px solid #767676;
            height:18px;
            line-height:18px;
            letter-spacing:2px;
            background-color:#8D8D8D;
            text-align:center;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript" src="__TMPL__../Admin/Public/mootools.js"></script>
    <script type="text/javascript" src="__TMPL__../__ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="__TMPL__../__my97/WdatePicker.js"></script>
    <script type="text/javascript">
        var _validate=[
        ];
    </script>
    <script type="text/javascript" src="__TMPL__../Admin/Public/base.js"></script>
</head>
<body>
    <div id="galleryContainer">
        <div id="gallery"></div>
        <div id="gallery_button">
            <div onclick="setThumb()">确定</div>
        </div>
    </div>
    <div id="container">
        <table class="tabmenu" cellspacing="0">
            <tbody>
                <tr>
                    <td class="wedge">&nbsp;</td>
                    <td class="wmenu"><a href="__URL__/index"><span>文档列表</span></a></td>
                    <td class="wmenu here">添加文档</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
        <div class="main">
            <ul class="fnc">
                <li><button type="button" class="btn primary" onclick="doAction('save')">保存</button></li>
                <li><button type="button" class="btn" onclick="doAction('back')">返回</button></li>
            </ul>
            <form id="postForm" method="post" action="__URL__">
                <input type="hidden" name="a" value="save">
                <input type="hidden" name="model" value="DefaultArticle">
                <table class="ips">
                    <tbody>
                        <tr>
                            <th class="essential"><label for="p2">所属栏目</label></th>
                            <td>
                                <select id="parentCategorys" name="category"></select>
                                <script type="text/javascript">
                                var optionStr="";
                                <iterate name="allocateCategorys" id="vo">
                                optionStr+="<option value=\"{$vo['id']}\">{$vo['name']}</option>";
                                </iterate>
                                $("parentCategorys").set('html','<option value="0">请选择...</option>'+optionStr);
                            </script>
                            </td>
                        </tr>
                        <tr>
                            <th class="essential"><label for="pk1">文档标题</label></th>
                            <td>
                                <input id="pk1" type="text" name="title" style="font-size:16px;letter-spacing:1px;font-weight:bold;width:630px;height:60px;" maxlength="240"/>
                                <p class="hint">不能超过240个字符</p>
                            </td>
                        </tr>
                        <tr>
                            <th class="essential"><label for="pk3">发表时间</label></th>
                            <td>
                                <?php $now=date("Y-m-d H:i:s"); ?>
                                <input id="pk3" type="text" name="pubdate" maxlength="250" size="25" value="{$now}" onfocus="this.blur()"/>
                                <img onclick="WdatePicker({el:'pk3',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})" src="__TMPL__../__my97/skin/datePicker.gif" width="16" height="22" align="absmiddle"/>
                            </td>
                        </tr>
                        <tr>
                            <th><label>文档属性</label></th>
                            <td>
                                <ul id="attPli">
                                    <li><input id="att_top" type="checkbox" name="att[]" value="top"/><label for="att_top">置顶</label></li>
                                    <li><input id="att_bold" type="checkbox" name="att[]" value="bold"/><label for="att_bold">加粗</label></li>
                                    <li><input id="att_recommend" type="checkbox" name="att[]" value="recommend"/><label for="att_recommend">推荐</label></li>
                                    <li><input id="att_slide" type="checkbox" name="att[]" value="slide"/><label for="att_slide">幻灯</label></li>
                                    <li><input id="att_roll" type="checkbox" name="att[]" value="roll"/><label for="att_roll">滚动</label></li>
                                    <li><input id="att_jump" type="checkbox" name="att[]" value="jump" onclick="jumpUrlSupport(this)" /><label for="att_jump">跳转</label></li>
                                </ul>
                                <script type="text/javascript">
                                    function jumpUrlSupport(obj){
                                        if(obj.checked) $("jumpUrlBody").setStyle('display','');
                                        else  $("jumpUrlBody").setStyle('display','none');
                                    }
                                </script>
                            </td>
                        </tr>
                    </tbody>
                    <tbody id="jumpUrlBody" style="display:none">
                        <tr>
                            <th class="essential"><label for="pk01">跳转地址</label></th>
                            <td>
                                <input id="pk01" type="text" name="jumpurl" maxlength="250" size="80" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table style="width:100%;margin:4px 0;">
                    <tbody>
                        <tr>
                            <td style="padding:0 60px;">
                                <textarea id="editor" name="content"></textarea>
                                <script type="text/javascript">
                                    CKEDITOR.replace( 'editor', {
                                        height:360,
                                        filebrowserImageUploadUrl:'__APP__/pUpload/ckImgUpload',
                                        contentsCss:'__TMPL__../Admin/Public/ckeditor.css'
                                    });
                                </script>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="clearfix">
                    <table style="float:left;width:614px;" class="ips">
                        <tbody>
                            <tr>
                                <th><label for="pk90">缩略图</label></th>
                                <td>
                                    <div>
                                        <input id="pk92" type="checkbox" name="isAutoThumb" value="yes" checked onclick="toggleThumb(this)"/><label for="pk92">自动提取</label>
                                        <input id="pk93" type="hidden" name="autoThumb"/>
                                    </div>
                                    <div id="div90" style="display:none;margin-top:10px;">
                                        <input id="pk90" type="text" name="thumb" size="54" onblur="setPreview2(this.value)"/>
                                        <button id="btn90" type="button" class="btn" onclick="getThumbFromContent()">选择</button>
                                    </div>
                                    <script type="text/javascript">
                                        var thumbSrc=null;
                                        var lastSetPic=null;
                                        function toggleThumb(obj){
                                            if(obj.checked){
                                                document.getElementById("div90").style.display="none";
                                                document.getElementById("preview").style.display="none";    //预览窗口
                                            }else{
                                                document.getElementById("div90").style.display="block";
                                                document.getElementById("preview").style.display="block";    //预览窗口
                                            }
                                        }
                                        function setPreview2(imgsrc){
                                            if(imgsrc!=thumbSrc){
                                                setPreview(new Element("img",{"src":imgsrc}));
                                            }
                                        }
                                        function setPreview(img){
                                            var preview=$("preview");
                                            preview.empty();
                                            //最大允许宽度200
                                            if(img.width>200){
                                                img.height=200*img.height/img.width;
                                                img.width=200;
                                            }
                                            img.style.border="1px solid #6B7D1A";
                                            img.style.marginTop="10px";
                                            img.style.marginLeft="4px";
                                            preview.grab(img);
                                            preview.style.display="block";
                                        }
                                        function setThumb(){
                                            var gc=$("galleryContainer"),gallery=$("gallery");
                                            if(lastSetPic){
                                                setPreview(lastSetPic.cloneNode(false));
                                                $("pk90").value=lastSetPic.src;
                                                thumbSrc=lastSetPic.src;
                                            }
                                            gc.style.display="none";
                                            lastSetPic=null;
                                        }
                                        function getThumbFromContent(){
                                            var frame=$("cke_contents_editor").getElement("iframe");
                                            var editorDoc=frame.contentWindow.document;
                                            var imgs=editorDoc.getElementsByTagName("img"),imgslen=imgs.length;
                                            if(imgslen>0){
                                                var gc=$("galleryContainer"),gallery=$("gallery");
                                                gallery.empty();
                                                for(var i=0;i<imgslen;i++){
                                                    var oi=imgs[i];
                                                    //创建图片并添加到其中去
                                                    var img=new Element("img",{"src":oi.src });
                                                    var w=oi.width,h=oi.height;
                                                    if(w>460){
                                                        h=460*h/w;
                                                        w=460;
                                                    }
                                                    img.setProperties({
                                                        "width":w,
                                                        "height":h,
                                                        'class':'opacity40'
                                                    });
                                                    img.setStyles({
                                                        "display":"block",
                                                        "margin":"0 auto"
                                                    });
                                                    gallery.grab(img);
                                                    img.onmouseover=function(){
                                                        this.className="opacity80";
                                                    }
                                                    img.onmouseout=function(){
                                                        if(lastSetPic!=this){
                                                            this.className="opacity40";
                                                        }
                                                    }
                                                    img.onclick=function(){
                                                        if(lastSetPic){
                                                            lastSetPic.style.borderColor="#484848";
                                                            lastSetPic.className="opacity40";
                                                        }
                                                        this.style.borderColor="#6B7D1A";
                                                        this.className="opacity100";
                                                        lastSetPic=this;
                                                    }
                                                }
                                                gallery.scrollTop=0;
                                                //定位并显示
                                                var win=$(window);
                                                var winsize=win.getSize();
                                                var scrollSize=win.getScroll();
                                                var winy=(winsize.y>420) ? winsize.y : 420;
                                                var winx=(winsize.x>480) ? winsize.x : 480;
                                                gc.setStyles({
                                                    'top':(winy-380)/2+scrollSize.y+'px',
                                                    'left':(winx-480)/2+'px',
                                                    'display':'block'
                                                });
                                            }else{
                                                alert("当前内容中没有找到图片资源");
                                            }
                                        }
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <th><label for="pk78">Tag标签</label></th>
                                <td>
                                    <div>
                                        <input id="pk78" type="text" size="40" name="tag"/>
                                        <button class="btn" type="button" onclick="getTags(this)">从已用标签中选择</button>
                                        <script type="text/javascript">
                                            function getTags(obj){

                                            }
                                        </script>
                                    </div>
                                    <div>
                                        <p class="hint"><a href="javascript:insertComma('pk78')">多个关键字之间以","分隔，您可以点击这里插入此字符</a></p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th><label for="pk11">作者</label></th>
                                <td>
                                    <input id="pk11" type="text" name="author" maxlength="32" size="40" />
                                    <p class="hint">长度不能超过32个字符</p>
                                </td>
                            </tr>
                            <tr>
                                <th><label for="pk12">来源</label></th>
                                <td>
                                    <input id="pk12" type="text" name="source" maxlength="32" size="40" />
                                    <p class="hint">长度不能超过32个字符</p>
                                </td>
                            </tr>
                            <tr>
                                <th><label for="pk13">关键字</label></th>
                                <td>
                                    <input id="pk13" type="text" name="keywords" maxlength="250" style="width:328px;height:49px;" />
                                    <p class="hint"><a href="javascript:insertComma('pk13')">多个关键字之间以","分隔，您可以点击这里插入此字符</a></p>
                                    <script type="text/javascript">
                                        function insertComma(id){
                                            var area=$(id);
                                            area.set('value',area.get('value')+',');
                                            area.focus();
                                        }
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <th><label for="pk14">摘要</label></th>
                                <td>
                                    <input id="pk14" type="text" name="summary" maxlength="250" style="width:496px;height:98px;" />
                                    <p class="hint">长度不能超过250个字符。如果不填写此项，系统将自动生成摘要</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div id="preview" style="float:left;">
                    </div>
                </div>
            </form>
            <ul class="fnc">
                <li><button type="button" class="btn primary" onclick="doAction('save')">保存</button></li>
                <li><button type="button" class="btn" onclick="doAction('back')">返回</button></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        function before_submit(){
            //handle auto extract thumb,the first jpg
            if($("pk92").checked){
                var frame=$("cke_contents_editor").getElement("iframe");
                var editorDoc=frame.contentWindow.document;
                var imgs=editorDoc.getElementsByTagName("img"),imgs_len=imgs.length;
                for(var i=0;i<imgs_len;i++){
                    var img=imgs[i];
                    var sx=img.src.split("."),suffix=sx[sx.length-1];
                    if('jpg'==suffix || 'jpeg'==suffix){
                        $("pk93").setProperty('value',img.src);
                        break;
                    }
                }
            }
            //end handle thumb
        }
        
        var pf=null;
        var pform=null;

        function checkForm(){
            //category
            var cate=$("parentCategorys");
            if('0'==cate.options[cate.selectedIndex].value){
                pf.showTip(cate,"请选择所属栏目");
                return false;
            }
            //title
            var titleIps=$("pk1");
            if(''==titleIps.value.trim()){
                pf.showTip(titleIps,"文档标题不能为空");
                return false;
            }
            return true;
        }
        
        function doAction(actionType){
            if("save"==actionType){
                if(!checkForm()) return;
                before_submit();
                pform.submit();
            }
        }

        $(window).addEvent('domready',function(){
            pform=$("postForm");
            pf=new yaForm(pform);
        });
    </script>
</body>
</html>